البرمجة

أساسيات الأزرار والنماذج في Foundation

اخر تحديث 11/06/2025
17 تمت قراءة 3 دقيقة

أساسيات إطار عمل Foundation: الأزرار والنّماذج

يُعتبر إطار العمل Foundation من أبرز أُطر التطوير الأمامية (Front-End Frameworks) التي أطلقتها شركة Zurb، ويُستخدم لتسهيل تصميم وتطوير واجهات المستخدم الاستجابية والمتكيفة مع مختلف أحجام الشاشات. يتميّز Foundation بقابليته العالية للتخصيص، وسهولة دمجه في المشاريع، وامتلاكه مكتبة متكاملة من العناصر الجاهزة مثل الأزرار، النماذج، الجداول، القوائم، التنقلات وغيرها. من بين أهم مكونات هذا الإطار: الأزرار والنماذج، نظرًا لكثرة استخدامها في التطبيقات والمواقع التفاعلية.

يتناول هذا المقال الموسّع توضيحًا شاملاً لأساسيات استخدام الأزرار والنماذج ضمن إطار العمل Foundation، مع تسليط الضوء على خصائصها، آليات تخصيصها، وأفضل الممارسات في توظيفها ضمن واجهات المستخدم العصرية.

مواضيع ذات صلة

أولاً: الأزرار في Foundation

ماهية الأزرار ودورها

الأزرار Buttons هي أحد العناصر التفاعلية الأساسية في واجهات المستخدم. وتُستخدم لتنفيذ الأوامر، وتأكيد العمليات، والتنقل داخل الواجهات. يُوفّر Foundation نظامًا مرنًا لتصميم الأزرار يتضمن ألوانًا متعددة، وأحجامًا متباينة، وخيارات استجابة عالية تلائم كافة الشاشات.

البنية الأساسية لزر في Foundation

يمكن إنشاء زر باستخدام الوسم ,

<a href="#" class="button">زر عاديa> <button class="button">زر تفاعليbutton> <input type="submit" class="button" value="زر إرسال">

أنواع الأزرار

يقدم Foundation تنسيقات متعددة للأزرار:

نوع الزر الفئة المستخدمة الوصف
الزر الأساسي .button الزر الافتراضي الأساسي.
الزر الثانوي .secondary يستخدم للتنبيه دون تركيز أساسي.
الزر الناجح .success يعبر عن نتيجة إيجابية.
الزر التحذيري .warning يشير إلى معلومات هامة أو تحذيرية.
الزر الخطر .alert يُستخدم للرسائل الحرجة أو الأخطاء.

تخصيص حجم الأزرار

يتضمن Foundation أربع فئات مخصصة للتحكم في حجم الأزرار:

  • .tiny – صغير جدًا

  • .small – صغير

  • .button – الحجم الافتراضي

  • .large – كبير

مثال:

html
<a href="#" class="button small">زر صغيرa>
<a href="#" class="button large success">زر كبير ناجحa>

جعل الأزرار ممتدة (Full Width)

يمكن استخدام الفئة .expanded لجعل الزر يمتد بعرض الحاوية:

html
<a class="button expanded">زر ممتدa>

أزرار مجموعة (Button Groups)

يدعم Foundation تجميع الأزرار ضمن مجموعة موحدة، مما يُفيد في التحكم بتنقلات المستخدم. يتم ذلك من خلال الفئة .button-group:

html
<div class="button-group">
  <a class="button">واحدa>
  <a class="button">اثنانa>
  <a class="button">ثلاثةa>
div>

يمكن تخصيص اتجاه المجموعة باستخدام .stacked أو .stacked-for-small.

ثانياً: النماذج في Foundation

مفهوم النماذج

النماذج Forms هي أدوات إدخال البيانات الأساسية في صفحات الويب. توفر Foundation آليات متطورة لإنشاء نماذج أنيقة، سريعة الاستجابة، وسهلة الاستخدام تتكامل مع متطلبات التصميم العصري.

الهيكل الأساسي للنموذج

يُستخدم الوسم

، ويتم إدراج الحقول والعناصر بداخله باستخدام فئات مخصصة:

html
<form>
  <label>البريد الإلكتروني
    <input type="email" placeholder="أدخل بريدك الإلكتروني">
  label>
  <label>كلمة المرور
    <input type="password" placeholder="********">
  label>
  <input type="submit" class="button" value="دخول">
form>

أنواع الحقول المدعومة

يدعم Foundation مجموعة واسعة من عناصر النماذج:

نوع العنصر الوسم HTML الفئات Foundation
حقل نصي يتم تنسيقه تلقائيًا ضمن
حقل بريد إلكتروني ينفذ تحققًا تلقائيًا على تنسيق البريد
حقل كلمة المرور لإدخال كلمات المرور
منطقة نصية كبيرة